<template>
<div class="">
    <p>
        <span class="tit1">武汉各区老年人口数</span>
    </p>
    <div ref="chart1" class='top20' style="width: 100%; height: 300px" />
</div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {geoJson} from './wuhan.js'
echarts.registerMap('武汉', geoJson);
export default {
  components: {},
  props: {},
  data() {
    return {
      chartData: {
        data1: [
            {name: '江岸区', value: 200},
            {name: '江汉区', value: 23},
            {name: '硚口区', value: 2323},
            {name: '汉阳区', value: 213},
            {name: '武昌区', value: 45},
            {name: '青山区', value: 6767},
            {name: '洪山区', value: 656},
            {name: '蔡甸区', value: 434},
            {name: '黄陂区', value: 4342},
            {name: '新洲区', value: 44},
            {name: '江夏区', value: 33},
            {name: '东西湖区', value: 88},
            {name: '汉南区', value: 444},
            {name: '江岸区', value: 555},
        ]
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    const t = this;
  },
  mounted() {
    const t = this;
    t.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart1, "macarons");
      this.setOptions();
    },
    setOptions() {
      const t = this;
      this.chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}人'
        },
        visualMap: {
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
                name: '',
                type: 'map',
                map: '武汉',
                label: {
                    show: false
                },
                data: t.chartData.data1
            }
        ]
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
